import React, {Component} from 'react'

import {WeaTop, WeaNewScroll} from 'ecCom'

import {Tabs, Tooltip, Modal, Button} from 'antd'

const TabPane = Tabs.TabPane

import {inject, observer} from "mobx-react";
import {observable, action, toJS} from 'mobx';

import {routerShape} from 'react-router';

import '../../style/report/index.less'
import AddReportModal from "./AddReportModal"
import ReportList from "../Component/ReportList/index"
import {REPORT_TYPE} from '../Component/ReportList/Const';

import {WeaLocaleProvider} from "ecCom";

const getLabel = WeaLocaleProvider.getLabel;

@inject('blogReport')
@observer
class Report extends Component {
  static contextTypes = {
    router: routerShape
  }

  constructor(props) {
    super(props)
    this.state = {
      topHeight: 0,
      currentType: "blog",
      showModalAddReport: false
    }
  }

  componentDidMount() {
    const {blogReport} = this.props;
    blogReport.getBlogReportConfig();
    blogReport.getReportList();
    this.setState({currentType: "blog"}, blogReport.doInit())
  }

  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    const {blogReport} = this.props;
    if (keyOld !== keyNew) {
      this.setState({currentType: "blog"}, blogReport.doInit())
    }
  }

  render() {
    const {blogReport} = this.props;
    const {loading, owner, list, table, hasMood} = blogReport,
      {topHeight, currentType} = this.state;

    let reportList = list.reportList || [],
      tableInfo = table.tableInfo || {},
      commProps = {
        data: tableInfo,
        style: {margin: "8px"},
        loading: loading,
        type: currentType,
        owner: owner,
        key: owner.key,
        actions: blogReport,
        editReport: this.editReport
      },
      dropMenuDatas = [
        {
          key: 'add',
            icon: <i className='icon-blog-AddTo'/>,
          content: getLabel(384477, "添加自定义报表")
        }
      ];
    if (owner.key != REPORT_TYPE.attention && owner.key != REPORT_TYPE.my) {
      dropMenuDatas.push({
        key: 'edit',
        icon: <i className='icon-coms-edit'/>,
        content: getLabel(384476, "编辑报表")
      });
      dropMenuDatas.push({
        key: 'del',
          icon: <i className='icon-coms-delete'/>,
        content: getLabel(26944, "删除报表")
      });
    }

    return (
      <div className="wea-report">
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bnw3y1`} title={getLabel(26470, "微博报表")} loading={loading} showDropIcon={true} getHeight={this.setTopHeight}
                icon={<span className='icon-coms-blog'/>}
                iconBgcolor="#6d3cf7"
                buttons={[
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@muj110@addcustom`} type="primary" onClick={this.editReport}>
                    <span className="icon-blog-AddTo">&nbsp;&nbsp;&nbsp;{getLabel(384477, "添加自定义报表")}</span>
                  </Button>
                ]}
                dropMenuDatas={dropMenuDatas}
                onDropMenuClick={this.onDropMenuClick}
        >
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ao8p99`} height={topHeight}>
            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@9bp1co`} activeKey={owner.key} className="wea-tabs" size="small" onChange={this.changeOwner}>
              {reportList.map(item => {
                const {key, title} = item;
                return (
                  <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@i12y2j@${key}`} key={key} tab={this.getTabPane(item)}/>
                )
              })}
            </Tabs>

            {owner.key != REPORT_TYPE.my && hasMood &&
            <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@hd1g6t`} activeKey={currentType} className="wea-grey-tabs" type="card" onChange={this.changeType}>
              <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@szc5pp`} tab={getLabel(26470, "微博报表")} key={"blog"}/>
              <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@6pcy6g`} tab={getLabel(384475, "心情报表")} key={"mood"}/>
            </Tabs>
            }
            <ReportList ecId={`${this && this.props && this.props.ecId || ''}_ReportList@qtr8i2`} ref="reportList" {...commProps} />
          </WeaNewScroll>
        </WeaTop>
        <AddReportModal ecId={`${this && this.props && this.props.ecId || ''}_AddReportModal@g2pkn4`} requestData={this.saveReport}/>
      </div>
    )
  }

  setTopHeight = (height) => {
    this.setState({topHeight: height})
  }

  changeOwner = (currentOwner) => {
    this.props.blogReport.chooseOwner(currentOwner);
  }

  deleteReport = (item) => {
    const {blogReport} = this.props
    Modal.confirm({
      title: getLabel(131329,'信息确认'),
      content: `${getLabel(384474, "确定删除微博报表")}"${item.title}"？`,
      okText: `${getLabel(382958,'确定')}`,
      cancelText:`${getLabel(31129,'取消')}`,
      onOk: () => blogReport.deleteReport({id: item.key})
    })
  }

  saveReport = (params) => {
    const {blogReport} = this.props;
    const {moduleStatus} = this.props.blogReport;
    if(moduleStatus.createOrEdit=='create'){
      blogReport.addReport(params, result => {
          if (result.status == "1") {
            moduleStatus.showCustomCreate=false;
          }
		  blogReport.addReportForm.resetForm();
        }
      )
    }else{
      blogReport.editCustomizeReport(params, result => {
        if (result.status == "1") {
          moduleStatus.showCustomCreate=false;
        }
      });
    }
  }

  editReport = (owner) => {
    const {blogReport} = this.props;
    const {moduleStatus,getBlogCustomReportAddCondition } = this.props.blogReport;
    if(owner && owner.key){
      getBlogCustomReportAddCondition({id: owner.key});
      moduleStatus.editKey = owner.key;
      moduleStatus.createOrEdit = 'edit';
    }else{
      getBlogCustomReportAddCondition();
      moduleStatus.createOrEdit = 'create';
    }

    moduleStatus.showCustomCreate = true;
  }


  changeType = (currentType) => {
    this.setState({currentType: currentType})
  }

  getTabPane = (item) => {
    let {key, title} = item;
    let closable = !(key == REPORT_TYPE.my || key == REPORT_TYPE.attention);
    return (
      <div>
        <div className="lh30" title ={title}  style={{"text-overflow": "ellipsis",
            "overflow": "hidden",
            "white-space": "nowrap",
            "text-align": "center",
            "width": "100%",
            "max-width": 100}}>{title}
            {closable && (
                <div style={{"position": "absolute", "top": 9, "right": 1}}>
                <span
                    className="icon-blog-Absenteeism"
                    style={{marginLeft: "8px"}}
                    onClick={() => this.deleteReport(item)}
                />
                </div>
            )}
        </div>
      </div>
    );
  }

  onDropMenuClick = (key) => {
    const {blogReport} = this.props;
    if (key === 'add') {
      this.editReport();
    } else if (key === 'edit') {
      this.editReport(blogReport.owner);
    } else {
      this.deleteReport(blogReport.owner);
    }
  }
}

export default Report